<script setup lang="ts">
import { getQueryCourses, type TQueryCondition, type TCoursesResult } from '@/api/courses'
const queryCondition = ref({
  currentPage: 1,
  pageSize: 5
} as TQueryCondition)

const CoursesResult = ref({} as TCoursesResult)
onMounted(async () => {
  const { data } = await getQueryCourses(queryCondition as TQueryCondition)
  if (data.code === '000000') {
    CoursesResult.value = data.data
  } else {
    ElMessage.error('获取课程数据失败')
    throw new Error('获取课程数据失败' + data.mesg)
  }
})
</script>

<template>
  <div>
    <h2>后台获取课程数据不全，课程列表和查询类似其他管理，这里省略</h2>
    <el-button type="primary" @click="$router.push('/course/create')">创建课程</el-button>
    <div style="margin-top: 17px">
      <el-table :data="CoursesResult.records" border stripe>
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="courseName" label="课程名称" align="center" />
        <el-table-column prop="price" label="课程价格" align="center" />
        <el-table-column prop="sortNum" label="课程排序号" align="center" />
        <el-table-column label="操作" align="center" v-slot="{ row }">
          <el-button @click="$router.push({ name: 'course-edit', params: { courseId: row.id } })">编辑</el-button>
          <el-button type="primary" @click="$router.push({ name: 'course-content', params: { courseId: row.id } })">内容管理</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
